// 商户中心>运营商
import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Select, Table, DatePicker } from 'antd'
import moment from 'moment'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { getAddressList, getVisitorList } from '@/services/dataCenter/macAddress'
import SearchBox from '@/components/SearchBox'
import { formLayout } from '@/utils/utils'
const { RangePicker } = DatePicker

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    render: (v, r, i) => {
      return (<span>{i+1}</span>  )
    }
  },
  {
    title: '抓拍设备名称',
    dataIndex: 'cameraName',
    key: 'cameraName',
  },
  {
    title: '抓拍人脸',
    dataIndex: 'facesImage',
    key: 'facesImage',
    render: (v, r, i) => {
      return (
        <img src={v} alt="" style={{width: '35px', height: '35px'}}/>
      )
    }
  },
  {
    title: '到访画面',
    dataIndex: 'facesFrame',
    key: 'facesFrame',
    render: (v, r, i) => {
      return (
        <img src={v} alt="" style={{width: '50px', height: '50px'}}/>
      )
    }
  },
  {
    title: '到访时间',
    dataIndex: 'timestamp',
    key: 'timestamp',
  }
]
const VisitRecord = props => {
  const [visitorList, setVisitorList] = useState([])
  const [macList, setMacList] = useState([])
  const [total, setTotalPage] = useState(null)
  const { form } = props
  const { getFieldDecorator } = form
  const [starttime, setStarttime] = useState('')
  const [endtime, setEndtime] = useState('')

  const formItemLay_1 = {
    labelCol: { span: 4 },
    wrapperCol: { span: 12 },
  }

  useEffect(() => {
    _getAddressList({pageNo: 1, pageSize: 9999})
  }, [])
  const _getVisitorList = async (param) => {
    const res = await getVisitorList(param)
    console.log(res)
    if (res.code == 0 && res.data) {
      setVisitorList(res.data)
      setTotalPage(res.total)
    }
  }
  const _getAddressList = async (param) => {
    const res = await getAddressList(param)
    if (res.code == 0 && res.data) {
      setMacList(res.data)
    }
  }
  const pagination = {
    total: parseInt(total),
    onChange (page) {
      _getVisitorList({
        ...param,
        pageNo: page,
      })
    }
  }
  // 清空查询条件
  const handleReset = () => {
    form.resetFields()
  }
  // 查询表单逻辑
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      _getVisitorList({
        ...values,
        starttime: starttime,
        endtime: endtime,
        pageNo: 1,
        pageSize: 10,
        vistTime: null
      })
    })
  }

  const dateFormat = 'YYYY-MM-DD HH:mm:ss'
  // 选择时间
  const selectData = (date, dateString) => {
    setStarttime(dateString[0])
    setEndtime(dateString[1])
  }
  // 查询表单
  const getFields = () => {
    return (
      <Form layout={formLayout}>
        <Form.Item label={`摄像头`} {...formItemLay_1}>
          {getFieldDecorator('macAddressList', {initialValue: []})(
            <Select mode="multiple">
              {macList && macList.map(r => <Select.Option key={r.id} value={r.macAddress}>{r.macName}</Select.Option>)}
            </Select>,
          )}
        </Form.Item>
        <Form.Item label={`到访时间`} {...formItemLay_1}>
          {getFieldDecorator(`vistTime`, {})
            (<RangePicker onChange={selectData} showTime={{ format: 'HH:mm:ss' }} />)}
        </Form.Item>
      </Form>
    )
  }

  return (<PageHeaderWrapper>
    { !macList.length
      ? <h4>暂未设置摄像头</h4>
      : <div>
        <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
        <Table columns={columns} dataSource={visitorList} rowKey={record => record.id} pagination={pagination} />
      </div>
    }

  </PageHeaderWrapper>)
}

export default Form.create({})(VisitRecord)
